<style lang="scss" scoped>
.xjw-switch {
  width: 88upx;
  height: 48upx;
  border-radius: 24upx;
  position: relative;
  background: #e3e5e9;
  transition: background-color 0.2s ease-in;
  &.active {
    background: $base-color;
    .xjw-switch_dots {
      transform: translateX(100%);
    }
  }
  .xjw-switch_dots {
    background: #fff;
    position: absolute;
    top: 4upx;
    bottom: 4upx;
    left: 4upx;
    border-radius: 50%;
    width: 40upx;
    box-shadow: 0 4upx 10upx 0 rgba(0, 39, 117, 0.3);
    transition: transform 0.2s ease-in;
  }
}
</style>
<template>
  <view class="xjw-switch" :class="{ active: value }" @tap.stop="toggle">
    <view class="xjw-switch_dots"> </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  @Prop({ type: Boolean, default: false }) value;

  toggle() {
    this.$emit("input", !this.value);
    this.$emit("change");
  }
}
</script>
